<template>
  <div>
    <div>
      <el-header style="background-color: black; height: 120px;">
        <div style="float: left; position: relative; top: 9px">
          <img src="@/assets/logo1.png" alt="软约评分系统" style="width: 55px; position: relative; top: 16px; left: 3px">
          <span
            style="font-size: 20px; margin-left: 15px; color: white; position: relative; bottom: 6px; font-weight: bold">软约评分系统</span>
        </div>
      </el-header>
    </div>
    <div id="app" style="width: 100vh; height: 100vh;">
      <div class="container">
        <div id="slide" ref="slide">
          <div class="item" v-for="(image, index) in images" :key="index" :style="{ backgroundImage: `url(${image})` }">
            <div class="content">
              <div class="name">CHN VIEW</div>
              <div class="des">Tinh ru anh di chay pho,chua kip chay ph</div>
              <el-button @click="dialogFormVisible = true">See more</el-button>
            </div>
          </div>
        </div>
        <div class="buttons">
          <div class="s_button" @click="prevSlide">&lt;</div>
          <div class="s_button" @click="nextSlide">&gt;</div>
        </div>
      </div>
      <div>
        <el-dialog title="请填写分数" :visible.sync="dialogFormVisible" width="30%">
          <el-form :model="form" ref="formRef">
            <el-form-item label="分数" label-width="15%">
              <el-input v-model="form.recScore" autocomplete="off" style="width: 90%"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  name: "show2",
  data() {
    return {
      images: [
        require('@/assets/o1.png'),
        require('@/assets/o2.png'),
        require('@/assets/o3.png'),
        require('@/assets/o4.png'),
        require('@/assets/o5.png'),
        require('@/assets/p3.png')
      ],
      input: '',
      value: '',
      form: {},
      dialogFormVisible: false,
      currentIndex: 0
    };
  },
  methods: {
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
      this.$refs.slide.appendChild(this.$refs.slide.children[0]);
    },
    prevSlide() {
      if (this.currentIndex === 0) {
        this.currentIndex = this.images.length - 1;
      } else {
        this.currentIndex = this.currentIndex - 1;
      }
      this.$refs.slide.insertBefore(this.$refs.slide.children[this.images.length - 1], this.$refs.slide.children[0]);
    },
    submit() {
      if (this.form.recScore === undefined) {
        this.$message({
          message: '请填写评分',
          type: 'error'
        });
        return;
      }
      const user = JSON.parse(localStorage.getItem('user'));
      this.form.judId = user.id;
      request.post("/record/score", this.form).then(res => {
        if (res.code === 1) {
          console.log(this.form.recScore)
          this.$message({
            message: '打分成功',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.form.rec_score = undefined;
        } else {
          this.$message({
            message: '打分失败',
            type: 'error'
          });
        }
      })
    },
  }
}
</script>

<style scoped>
.container {
  /* 1000px 600px */
  width: 100%;
  height: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f5f5f5;
  padding: 50px;
  box-shadow: 0 30px 50px #dbdbdb;
}

#slide {
  width: max-content;
  margin-top: 50px;
}

.item {
  width: 200px;
  height: 300px;
  background-position: 50% 50%;
  display: inline-block;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: calc(50% + 200px);
  /* 添加了 left 属性 */
  transform: translate(110%, -50%);
  /* transform: translateX(90%); */
  border-radius: 20px;
  box-shadow: 0 30px 50px #505050;
  transition: .5s;
}

.item:nth-child(1),
.item:nth-child(2) {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(0);
  border-radius: 0;
  box-shadow: none;
}

.item:nth-child(3) {
  left: 50%;
}

.item:nth-child(4) {
  left: calc(50% + 220px);
}

.item:nth-child(5) {
  left: calc(50% + 440px);
}

.item:nth-child(n+6) {
  left: calc(50% + 660px);
  opacity: 0;
}

.item .content {
  width: 300px;
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  font-family: system-ui;
  color: #eee;
  display: none;
}

.item:nth-child(2) .content {
  display: block;
}

.item .name {
  font-size: 40px;
  font-weight: bold;
  opacity: 0;
  animation: showcontent 1s ease-in-out 1 forwards;
}

.item .des {
  margin: 20px 0;
  opacity: 0;
  animation: showcontent 1s ease-in-out 0.3s 1 forwards;
}

.item button {
  padding: 10px 20px;
  border: none;
  opacity: 0;
  animation: showcontent 1s ease-in-out 0.6s 1 forwards;
}

@keyframes showcontent {
  from {
    opacity: 0;
    transform: translateY(100px);
    filter: blur(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.buttons {
  width: 100%;
  position: absolute;
  bottom: 50px;
  margin-left: -50px;
  text-align: center;
}

.s_button {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: center;
  color: gray;
  background-color: #fff;
  font-size: 25px;
  border-radius: 50%;
  font-weight: bold;
  border: 1px solid #555;
  margin: 0 25px;
  transition: .5s;
}

.s_button:hover {
  cursor: pointer;
  background-color: #ccc;
}
</style>
